<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
	<link rel="strlesheet" href="css/pagination.css">
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<link rel="stylesheet" href="css/main.css">
	<style>
	.tree li {
        list-style-type: none;
		cursor:pointer;
	}
	table tbody tr:nth-child(odd){background:#F4F4F4;}
	table tbody td:nth-child(even){color:#C00;}

	</style>
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <div><a class="navbar-brand" style="font-size:32px;" href="#">众筹平台 - 用户维护</a></div>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li style="padding-top:8px;">
				<div class="btn-group">
				  <button type="button" class="btn btn-default btn-success dropdown-toggle" data-toggle="dropdown">
					<i class="glyphicon glyphicon-user"></i> 张三 <span class="caret"></span>
				  </button>
					  <ul class="dropdown-menu" role="menu">
						<li><a href="#"><i class="glyphicon glyphicon-cog"></i> 个人设置</a></li>
						<li><a href="#"><i class="glyphicon glyphicon-comment"></i> 消息</a></li>
						<li class="divider"></li>
						<li><a href="index"><i class="glyphicon glyphicon-off"></i> 退出系统</a></li>
					  </ul>
			    </div>
			</li>
            <li style="margin-left:10px;padding-top:8px;">
				<button type="button" class="btn btn-default btn-danger">
				  <span class="glyphicon glyphicon-question-sign"></span> 帮助
				</button>
			</li>
          </ul>
          <form class="navbar-form navbar-right">
            <input type="text" class="form-control" placeholder="Search...">
          </form>
        </div>
      </div>
    </nav>
	<section id="mainContentId"	 class="content container-fluid">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
			<div class="tree">
				<ul style="padding-left:0px;" class="list-group">
					<li class="list-group-item tree-closed" >
						<a href="main"><i class="glyphicon glyphicon-dashboard"></i> 控制面板</a>
					</li>
					<li class="list-group-item">
						<span><i class="glyphicon glyphicon glyphicon-tasks"></i> 权限管理 <span class="badge" style="float:right">3</span></span> 
						<ul style="margin-top:10px;">
							<li style="height:30px;">
								<a href="user" style="color:red;"><i class="glyphicon glyphicon-user"></i> 用户维护</a>
							</li>
							<li style="height:30px;">
								<a href="role"><i class="glyphicon glyphicon-king"></i> 角色维护</a>
							</li>
							<li style="height:30px;">
								<a href="permission"><i class="glyphicon glyphicon-lock"></i> 菜单维护</a>
							</li>
						</ul>
					</li>
					<li class="list-group-item tree-closed">
						<span><i class="glyphicon glyphicon-ok"></i> 业务审核 <span class="badge" style="float:right">3</span></span> 
						<ul style="margin-top:10px;display:none;">
							<li style="height:30px;">
								<a href="auth_cert"><i class="glyphicon glyphicon-check"></i> 实名认证审核</a>
							</li>
							<li style="height:30px;">
								<a href="auth_adv"><i class="glyphicon glyphicon-check"></i> 广告审核</a>
							</li>
							<li style="height:30px;">
								<a href="auth_project"><i class="glyphicon glyphicon-check"></i> 项目审核</a>
							</li>
						</ul>
					</li>
					<li class="list-group-item tree-closed">
						<span><i class="glyphicon glyphicon-th-large"></i> 业务管理 <span class="badge" style="float:right">7</span></span> 
						<ul style="margin-top:10px;display:none;">
							<li style="height:30px;">
								<a href="cert"><i class="glyphicon glyphicon-picture"></i> 资质维护</a>
							</li>
							<li style="height:30px;">
								<a href="type"><i class="glyphicon glyphicon-equalizer"></i> 分类管理</a>
							</li>
							<li style="height:30px;">
								<a href="process"><i class="glyphicon glyphicon-random"></i> 流程管理</a>
							</li>
							<li style="height:30px;">
								<a href="advertisement"><i class="glyphicon glyphicon-hdd"></i> 广告管理</a>
							</li>
							<li style="height:30px;">
								<a href="message"><i class="glyphicon glyphicon-comment"></i> 消息模板</a>
							</li>
							<li style="height:30px;">
								<a href="project_type"><i class="glyphicon glyphicon-list"></i> 项目分类</a>
							</li>
							<li style="height:30px;">
								<a href="tag"><i class="glyphicon glyphicon-tags"></i> 项目标签</a>
							</li>
						</ul>
					</li>
					<li class="list-group-item tree-closed" >
						<a href="param"><i class="glyphicon glyphicon-list-alt"></i> 参数管理</a>
					</li>
				</ul>
			</div>
        </div>

        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
			<div class="panel panel-default">
			  <div class="panel-heading">
				<h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
			  </div>
			  <div class="panel-body">
<form class="form-inline" role="form" style="float:left;">
  <div class="form-group has-feedback">
    <div class="input-group">
      <div class="input-group-addon">查询条件</div>
      <input class="form-control has-success" id="selectAdmin" type="text" placeholder="请输入查询条件">
    </div>
  </div>
  <button type="button" class="btn btn-warning" onclick="doSelectAdmin()"><i class="glyphicon glyphicon-search"></i> 查询</button>
</form>
<button type="button" class="btn btn-danger" onclick="doDeleteAdminById()" style="float:right;margin-left:10px;"><i class=" glyphicon glyphicon-remove"></i> 删除</button>
<button type="button" class="btn btn-primary" style="float:right;" onclick="window.location.href='add'"><i class="glyphicon glyphicon-plus"></i> 新增</button>
<br>
 <hr style="clear:both;">
          <div class="table-responsive">
            <table class="table  table-bordered">
              <thead>
                <tr >
                  <th width="30">序号</th>
				  <th width="30"><input id="checkAll" type="checkbox"></th>
                  <th>账号</th>
                  <th>名称</th>
                  <th>邮箱地址</th>
                  <th width="100">操作</th>
                </tr>
              </thead>
              <tbody id="tbodyId">
			  <tr>
				  <td colspan="6">数据正在加载中...</td>
			  </tr>


              </tbody>
			  <tfoot>
			     <tr >
				     <td colspan="6" align="center">

						 <div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
					 </td>
				 </tr>

			  </tfoot>
            </table>
          </div>
			  </div>
			</div>
        </div>

      </div>

    </div>
	</section>


    <script src="jquery/jquery-2.1.1.min.js"></script>
	<script src="jquery/jquery.pagination.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
	<script src="script/docs.min.js"></script>
        <script type="text/javascript">
            $(function () {
			    $(".list-group-item").click(function(){
				    if ( $(this).find("ul") ) {
						$(this).toggleClass("tree-closed");
						if ( $(this).hasClass("tree-closed") ) {
							$("ul", this).hide("fast");
						} else {
							$("ul", this).show("fast");
						}
					}
				});




				doSelectAdmin();

				$("#checkAll").click(doChangeTBodyCheckBoxState);
				$("#tbodyId").on("change","input:checkbox",doChangeTHeadCheckBoxState)

            });
            $("tbody .btn-success").click(function(){
                window.location.href = "assignRole";
            });
            $("tbody .btn-primary").click(function(){
                window.location.href = "edit";
            });
            function doDeleteAdminByOneId(id) {
				if(!confirm("确认删除吗"))return;
				const url = "/doDeleteAdminById";
				var params={"ids":id};
				$.getJSON(url, params, function (result) {
					if(result.state==1){
						alert(result.message);
						doSelectAdmin();
					}else{
						alert(result.message);
						//doSetQueryErrors(result.message);
					}

				})
            }
            function doDeleteAdminById() {
				var ids=doGetCheckedIds();
				if(ids.length==0){
					alert("至少选一个");
					return;
				}
				if(!confirm("确认删除吗"))return;
				const url = "/doDeleteAdminById";
				var params={"ids":ids.toString()};
				console.log(params);
				$.getJSON(url, params, function (result) {
					if(result.state==1){
						alert(result.message);
						doRefreshAfterDeleteOK();
						// doGetObjects();
					}else{
						alert(result.message);
						//doSetQueryErrors(result.message);
					}
				})
			}
			function doGetCheckedIds() {
				var idArray=[];
				$("#tbodyId input[type=checkbox]").each(
						function () {
							if($(this).prop("checked"))idArray.push($(this).val());
						})
				return idArray;
			}
			function doRefreshAfterDeleteOK() {
				//var pageNum=$("#pageId").data("pageNum");
				//var pageCurrent=$("#pageId").data("pageCurrent");
				//var checked=$("#checkAll").prop("checked");
				/*if(checked){
					pageCurrent--;
					$("#pageId").data("pageCurrent",pageCurrent);
				}*/
				doSelectAdmin();
			}
			function doChangeTBodyCheckBoxState() {
				var flag=$(this).prop("checked");//true or false
				//2.将tbody中所有checkbox元素的值都修改为flag对应的值。
				/*$("#tbodyId input[name='cItem']").each(function () {
                    $(this).prop("checked",flag);
                })*/
				$("#tbodyId input:checkbox").prop("checked",flag);
			}
			function doChangeTHeadCheckBoxState() {
				var flag=true;
				$("#tbodyId input:checkbox").each(function () {
					flag=  flag&&$(this).prop("checked")
				});
				$("#checkAll").prop("checked",flag);
			}
			function doSelectAdmin() {
				$("#checkAll").prop("checked",false);
				var pageNum = $(".pagination").data("pageNum");
				var uname=$("#selectAdmin").val();
				console.log(uname);
				//参数封装
				let params={"pageNum":pageNum};//json格式的js对象
				if(uname)params.keyword=uname;
				const url="/admin/page.html";
				$.getJSON(url, params, function (result) {
					doSetTableBodyRows(result);
					initPagination(result);
				})
			}
			function initPagination(pageInfo) {
				var totalRecord=pageInfo.data.total;
				//声明一个JSON对象存储Pagination要设置的属性
				var properties={
					num_edge_entries: 3,               //边缘页数
					num_display_entries: 5,				//主体页数
					callback:pageSelectCallback,		//用户点击1,2,3调用这个函数实现页面跳转
					items_per_page:pageInfo.data.pageSize, //每页显示的数量
					current_page: (pageInfo.data.pageNum-1), //Pagination内部使用pageIndex来管理,pageIndex从0开始,pageNum从1开始,所以减一
					prev_text: "上一页",
					next_text: "下一页"
				};
				//生成导航条
				$("#Pagination").pagination(totalRecord,properties);

			}
			//用户点击1,2,3调用这个函数实现页面跳转
			function pageSelectCallback(pageIndex,jQuery) {
				//根据pageIndex计算得到pageNum
				var pageNum=pageIndex+1;
				let params={"pageNum":pageNum};
				const url="/admin/page.html";
				//跳转页面
				$.getJSON(url, params, function (result) {
					doSetTableBodyRows(result);
				})
				return false;
			}
			function doSetTableBodyRows(pageInfo) {
				//1.获取tbody对象并清空内存
				var tBody = $("#tbodyId");
				tBody.empty();
				//2.遍历records并将结果更新到页面上.
				//for(var i in records) {      //数据量大的时候,性能较差    i的作用域不严谨
				/*for(let i=0;i<records.length;i++){
                    var tr = $("<tr></tr>");
                    var tds=doCreateTds(records[i]);
                    tr.append(tds);
                    tBody.append(tr);
                }*/
				//console.log(pageInfo);
				var record=pageInfo.data.list;
				//console.log(record);
				record.forEach(record => tBody.append(doCreateTds(record)))
				number();
			}


			function doCreateTds(data) {
				return `<tr>
							<td><span class="numberClass"></span></td>
							<td><input type="checkbox" class="cBox"  name="cItem" value="${data.id}"></td>
							<td>${data.loginAcct}</td>
							<td>${data.userName}</td>
							<td>${data.email}</td>
							<td>
								<button type="button" class="btn btn-success btn-xs">  <i class=" glyphicon glyphicon-check"></i></button>
								<button type="button" class="btn btn-primary btn-xs" onclick="doFindAdminById(${data.id})"><i class=" glyphicon glyphicon-pencil"></i></button>
								<button type="button" class="btn btn-danger btn-xs" onclick="doDeleteAdminByOneId(${data.id})"><i class=" glyphicon glyphicon-remove"></i></button>
							</td>
						</tr>`
			}

			function number(){
				for(var i=0;i< $(".numberClass").length;i++){
					$(".numberClass").get(i).innerHTML = i+1;
				}
			}
			function doFindAdminById(id) {

				var url="/doFindAdminById";
				var params={"id":id};
				$.getJSON(url,params,function (data) {
					//console.log(data);
					doUpdateAdmin(data.data);
				})
			}
			function doUpdateAdmin(data) {
				//console.log(data)
				console.log(data.loginAcct)
				$("#mainContentId").load("add",function(){
					$(".active").html("修改");
					$(".btn-success").html("修改");
					$("#AdminId").val(data.id);
					$("#exampleInputPassword1").val(data.loginAcct);
					$("#exampleInputPassword2").val(data.userPswd);
					$("#exampleInputPassword3").val(data.userName);
					$("#exampleInputEmail1").val(data.email);
				})



			}


		</script>
  </body>
</html>
